<template>
    <n-input v-model:value="msgText" placeholder="请输入内容"></n-input>
    <n-button @click="handleSend">发送</n-button>
    <n-space vertical>
        <n-text v-for="msg in rec">
            {{msg}}
        </n-text>
    </n-space>
</template>
<script lang="ts" setup>
import { createStorage } from '@/utils/Storage';
import { ref } from 'vue';


const msgText = ref("");
const rec:any = ref([]);
const Storage = createStorage({ storage: localStorage });

const ws = new WebSocket('ws://10.68.13.14:23567');

ws.onopen = () =>{
    ws.send(JSON.stringify({
        Authorization:Storage.get("ACCESS-TOKEN", ''),
        type:'conn'
    }))
}

ws.onmessage = (e)=> {
    // recive.value = e.data;
    rec.value.push(e.data);
}


const handleSend= ()=>{
    
    ws.send(JSON.stringify({
        Authorization:Storage.get("ACCESS-TOKEN", ''),
        msg :msgText.value,
        type:'msg'
    }));
}
</script>